<template>
    <div>
        <template v-if="loadingPage">
            <div style="text-align: center">
                <van-loading color="#1989fa"/>
            </div>

        </template>
        <van-grid>
            <section class="block" v-for="(menu ,index) in menus"
                     :key="index" :desc="menu?.orderNum">
                <van-grid-item
                        v-if="menu.mobileState==2"
                        :text="menu.name" @click="()=>go2menu(menu)"
                >
                    <template #icon v-if="menu.img">
                        <svg-icon :icon-class="menu.img"></svg-icon>
                    </template>
                </van-grid-item>


            </section>
        </van-grid>
    </div>
</template>
<script lang="ts" setup="props">

import {Grid, GridItem} from 'vant';
import {reactive, onMounted, ref} from "vue";

import {article} from "@/api/index";
import * as api from '@/api/menu/menu.api'
import {getUrlParam} from "@/utils";
import {Menus} from "@/types/menu";
import {OpenIframe} from "@/components/FormDialog/openIframe/openIframe";
import {useRouter} from "vue-router";
import {makeUrlWithParams} from "@/utils/routerUtils";
import {getToken} from "@/utils/auth";

const router = useRouter();
defineOptions({
    name: 'Home01',
});

const menus = ref<Menus[]>([])
var loadingPage = false;

function go2purchaseApply() {
    router.push("/material/purchase")
}

async function getMenus() {
    loadingPage = true;
    var meauId = getUrlParam('meauid')
    if (!meauId) {
        meauId = '0';
    }
    var tempMenus = await api.getMenus(parseInt(meauId)).then(res => res.data)
    console.log('menus', tempMenus)
    menus.value = tempMenus;

}

function go2menu(menu: Menus) {
    loadingPage = true;
    if (menu?.haveNext) {
        router.push(`/sec?meauid=${menu.id}`)
        return;
    }
    var mobileUrl = menu?.mobileUrl;
    if (mobileUrl) {
        if (mobileUrl.indexOf('/manage/http:/') >= 0) {
            mobileUrl = mobileUrl.replace('/manage/', '')
            mobileUrl = makeUrlWithParams(mobileUrl, {
              navId: menu && menu.id,
              token:getToken()
            })
            location.href = `/manage/showIframe?iframeUrl=${encodeURIComponent(mobileUrl)}`;
            return;
            //  router.push(mobileUrl)
        } else {
          mobileUrl = makeUrlWithParams(mobileUrl, {
            navId: menu && menu.id,
          })
           router.push(mobileUrl)
        }

    }
    loadingPage = false;
}

onMounted(async () => {
    await getMenus()
})
</script>
<style scoped>
.block {
    margin-top: 20px;
    padding: 10px;
}

.titleblock {
    left: 11px;
    top: 89px;
    width: 88px;
    line-height: 20px;
    border-radius: 5px 5px 1px 1px;
    background-color: rgba(24, 144, 255, 100);
    color: rgba(255, 255, 255, 100);
    font-size: 14px;
    text-align: center;
    padding-top: 5px;
    padding-bottom: 5px;
    font-family: Arial;
}
</style>
